import React, { Component } from 'react'
import axios from 'axios'
import './App.css'

// 【运行需要打开public中的bootstrap样式】
export default class App extends Component {
    state = {
        userList: [],
        isFirst: true,  // 是否为第一次打开页面
        isLoading: false, // 是否处于加载中
        err: '', //
    }

    search = () => {
        // 获取用户的输入
        const { value } = this.keyWordElement

        // 发送请求前通知App更新状态
        this.setState({ isFirst: false, isLoading: true })

        // 发送请求
        axios.get(`https://api.github.com/search2/users?q=${value}`).then(res => {
            console.log('res', res.data.items);
            this.setState({isLoading:false, userList: res.data.items })
        }).catch(err => {
            console.log('catch', err.message);
            this.setState({isLoading:false, err:err.message })
        })
    }
    render() {
        const { userList,isFirst,isLoading,err } = this.state
        return (
            <div className="container">
                <section className="jumbotron">
                    <h3 className="jumbotron-heading">Search Github Users</h3>
                    <div>
                        <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />
                        <button onClick={this.search}>Search</button>
                    </div>
                </section>
                <div className="row">
                    {
                        isFirst ? <h2>欢迎使用，输入关键字，点击</h2> :
                        isLoading ? <h2>Loading......</h2> :
                        err ? <h2 style={{color:'red'}}>{err}</h2> :
                        userList.map(el => {
                            return <div className="card" key={el?.id}>
                                <a href="https://github.com/reactjs" target="_blank">
                                    <img src={el?.avatar_url} style={{ width: '100px' }} />
                                </a>
                                <p className="card-text">reactjs</p>
                            </div>
                        })
                    }

                    {/* <div className="card">
                        <a href="https://github.com/reactjs" target="_blank">
                            <img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{ width: '100px' }} />
                        </a>
                        <p className="card-text">reactjs</p>
                    </div>
                    <div className="card">
                        <a href="https://github.com/reactjs" target="_blank">
                            <img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{ width: '100px' }} />
                        </a>
                        <p className="card-text">reactjs</p>
                    </div> */}
                </div>
            </div>
        )
    }
}
